<template>
	<view>
		<view class="search-box">
			<uni-search-bar
				placeholder="请输入订单号搜索"
				bgColor="#fff"
				:cancelButton="false"
				v-model="orderNo"
				@confirm="handleSearch"
				@clear="clearSearch"
			/>
		</view>
		<uni-section type="line" title="投诉列表" class="body-list">
			<template v-slot:right>
				<view class="a" @click="toSearch">筛选</view>
			</template>
			<uni-list :border="true" v-if="complainList.length > 0">
				<uni-list-item
					thumbSize="lg"
					direction="column"
					v-for="(item, index) in complainList"
					:key="index"
				>
					<template v-slot:header>
						<view class="list-item-header">
							<view class="order-no">No. {{item.orderNo}}</view>
							<view class="pay-state" :style="{color: item.state == 1 ? '#00aa00' : '#ff5500'}">{{item.state == 1 ? '已处理' : '未处理'}}</view>
						</view>
					</template>
					<template v-slot:body>
						<view class="list-item-body">
							<view class="margin-top-10">投诉内容：{{item.content || '暂无'}}</view>
							<view class="margin-top-10">用户电话：{{item.phone}}</view>
							<view class="margin-top-10">提交时间：{{item.createTime}}</view>
						</view>
					</template>
				</uni-list-item>
				<uni-load-more :status="status" :icon-size="14" :content-text="contentText"></uni-load-more>
			</uni-list>
			<empty-view v-else></empty-view>
		</uni-section>
	</view>
</template>

<script>
	import EmptyView from "@/components/EmptyView"
	
	export default {
		components: {
			EmptyView
		},
		
		data() {
			return {
				orderNo: "",
				search: {},
				complainList: [],
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
				pageNo: 1,
				pageSize: 10
			}
		},
		
		onLoad() {
			this.getComplainList()
		},
		 
		onShow() {
			let uid = uni.getStorageSync('uid');
			if(!uid) {
				uni.reLaunch({
					url:'/pages/user/login'
				})
			}
		},
		
		onReachBottom() {
			if(this.status === 'more') {
				this.status = 'loading';
				this.getComplainList();
			}
		},
		
		methods: {
			setSearch( data ) {
				this.search = data
				this.handleSearch()
			},
			
			handleSearch() {
				this.pageNo = 1;
				this.complainList = []
				this.getComplainList()
			},
			
			clearSearch() {
				this.orderNo = ""
				this.getComplainList()
			},
			
			getComplainList() {
				uni.showLoading({
					title: '加载中...'
				})
				uni.request({
					url: getApp().globalData.apiUrl + '/card/api/v1/complaintList',
					data: {
						merchantId: uni.getStorageSync('mid'),
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						orderNo: this.orderNo,
						...this.search
					},
					success: res => {
						if(res.data.success) {
							let result = res.data.result
							let dataList = result.records
							let pn = this.pageNo;
							let datas = [];
							let status;
									
							if (pn == 1) {
								datas = dataList;
							} else {
								datas = this.complainList.concat(dataList);
							}
								
							if (result.total > datas.length) {
								pn += 1;
								status = "more"
							} else {
								status = "no-more"
							} 
							
							this.setData({
								status,
								pageNo: pn,
								complainList: datas,
							});
							
							uni.hideLoading()
						} else {
							uni.showToast({
								icon:'error',
								title: res.data.message
							})
						}
					}
				})
			},
			
			toSearch() {
				uni.navigateTo({
					url: "/pages/complain/search"
				})
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		height: 120rpx;
	}

	.body-list {
		height: calc(100vh - 120rpx);
	}
	
	.scroll-list {
		height: calc( 100vh - 120rpx - 43px);
	}
	
	.list-item-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		
		.order-no {
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.pay-state {
			font-size: 28rpx;
		}
	}
	
	.list-item-body {
		font-size: 26rpx;
		color: #6d6d6d;
		margin-top: 20rpx;
	}
</style>